<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>java to smali</title>
    <link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css">
    <script src="https://www.layuicdn.com/layui/layui.js"></script>
    <script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.js"></script>
    <script src="https://cdn.bootcss.com/sockjs-client/1.1.4/sockjs.min.js"></script>
    <script src="https://cdn.bootcss.com/stomp.js/2.3.3/stomp.min.js"></script>
    <style>
        .header {
            position: fixed;
            background: white;
            line-height: 44px;
            font-size: 18px;
            height: 44px;
            width: 100%;
            z-index: 1;
        }

        .content {
            margin-top: 66px;
            position: absolute;
        }
    </style>
</head>
<body>
    <div class="layui-container">

        <div class="layui-col-md12">
            <div class="layui-row layui-col-space15">
                <form class="layui-form" action="">
                    <div class="layui-form-item">
                        <label class="layui-form-label"><span style="color: red">*</span>文件名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="fileName" required lay-verify="required" placeholder="请输入文件名" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">文本域</label>
                        <div class="layui-input-block">
                            <textarea id="content" name="content" placeholder="请输入内容" class="layui-textarea"></textarea>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                </form>
                <div class="layui-col-md12">
                    <div class="layui-panel">
                        <div style="padding: 50px 30px;">
                            <pre class="layui-code" id="smaliCode"></pre>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <button onclick="openSocket()">开启日志</button>
        <button onclick="closeSocket()">关闭日志</button>
        <div id="log-container" style="height: 450px; overflow-y: scroll; background: #333; color: #aaa; padding: 10px;">
            <div></div>
        </div>
    </div>

    <script>
        layui.use(['form', 'upload', 'code', 'element', 'jquery'], function () {
            let form = layui.form
                , $ = layui.jquery;

            layui.code({
                height: '100px' //请注意必须加px。如果该key不设定，则会自适应高度，且不会出现滚动条。
            })

            let textarea = document.getElementById('content');
            textarea.addEventListener('input', function() {
                this.style.height = this.scrollHeight +'px';
            }, false);




            form.on('submit(formDemo)', function (data) {
                $.ajax({
                    url: 'api/toSmali',
                    type: 'POST',
                    data: data.field,
                    success: function (obj) {
                        $("#smaliCode").html(obj);
                        layui.code()
                    }
                });
                return false; // 阻止表单跳转。如果需要表单跳转，去掉这段即可。
            });
        });


        let stompClient = null;
        $(document).ready(function () {
            openSocket();
        });

        function openSocket() {
            if (stompClient == null) {
                let socket = new SockJS('websocket?token=kl');
                stompClient = Stomp.over(socket);
                stompClient.connect({token: "kl"}, function (frame) {
                    stompClient.subscribe('topic/pullLogger', function (event) {
                        var content = JSON.parse(event.body);
                        console.log(content);
                        $("#log-container div").append(content.timestamp + " " + content.level + " --- [" + content.threadName + "] " + content.className + "   :" + content.body).append("<br/>");
                        $("#log-container").scrollTop($("#log-container div").height() - $("#log-container").height());
                    }, {
                        token: "kltoen"
                    });
                });
            }
        }

        function closeSocket() {
            if (stompClient != null) {
                stompClient.disconnect();
                stompClient = null;
            }
        }
    </script>

</body>
</html>